      window.onload = function() {
        // body...
        var prev = document.getElementById("prev");
        var next = document.getElementById("next");
        var list = document.getElementById("list");
        var buttons = document.getElementById("buttons").getElementsByTagName("span");
        var container = document.getElementById("container");
        var index = 1;
        var timer;
        var animated = false;

        function shownButton() {
          for (var i = 0; i < buttons.length; i++) {
            if (buttons[i].className == 'on') {
              buttons[i].className = '';
              /* prev和next每click一次，
               就会清除一次前一个class为on的span元素，
               所以没有必要再去循环下面的span*/
              break;
            }
            //  或者直接遍历清除  buttons[i].className=""；
          }
          buttons[index - 1].className = "on";
        }

        function animate(offset) {
          var time = 300;
          var inteval = 10;
          var speed = offset / (time / inteval);
          animated = true;
          var newLeft = parseInt(list.style.left) + offset;

          function go() {
            if ((speed > 0 && parseInt(list.style.left) < newLeft) || (speed < 0 && parseInt(list.style.left) > newLeft)) {
              list.style.left = parseInt(list.style.left) + speed + 'px';
              setTimeout(go, inteval);
            } else {

              animated = false;
              // list.style.left=newLeft+"px";
              if (newLeft > -600) {
                list.style.left = -3000 + "px";
              };
              if (newLeft < -3000) {
                list.style.left = -600 + "px";
              };
            }
          }
          go();
        };



        prev.onclick = function() {
          /*添加一个if判断index为1时，如果继续往前滚的话就让index返回第五个span
          但是当快速点击arrow时会出现一种span点亮延迟的情况。可以尝试把判断index是否大于1或小于5的情况放进
          判断是否animated的if语句中，先判断能不能点击，再点亮。
          */

          if (!animated) {
            if (index == 1) {
              index = 5;
            } else {
              index -= 1;
            }

            shownButton();
            animate(600);
          }



        };
        next.onclick = function() {



          if (!animated) {
            if (index == 5) {
              index = 1;
            } else {
              index += 1;
            }
            shownButton();
            animate(-600);
          }
        };
        for (var i = 0; i < buttons.length; i++) {
          buttons[i].onclick = function() {
            //无关紧要
            if (this.className == "on") {
              return;
            }
            var myIndex = parseInt(this.getAttribute("index"));
            var offset = -600 * (myIndex - index);
            if (!animated) {
              animate(offset);
            }
            index = myIndex;
            shownButton();

          }
        }

        function play() {
          timer = setInterval(function() {
            next.onclick();
          }, 2000);
        }

        function stop() {
          clearInterval(timer);
        }
        play();
        container.onmouseover = stop;
        container.onmouseout = play;
      }